<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body class="layui-view-body">
<div class="layui-content" id="content">
    <div class="layui-page-header">
        <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">用户</a>
                  <a><cite>商品管理</cite></a>
                </span>
            <h2 class="title">商品管理</h2>
        </div>
    </div>
    <div class="layui-row">
        <div>
            <div class="layui-form  toolbar">
                <div class="layui-inline">

                    <select id="searchKey">
                        <option value="">-请选择-</option>
                        <option value="user_id">ID</option>
                        <option value="user_account">账号</option>
                        <option value="user_nickname">用户名</option>
                        <option value="mobile_phone">手机号</option>
                    </select>&emsp;
                </div>
                <div class="layui-inline">
                    <input id="searchValue" class="layui-input search-input" type="text" placeholder="输入搜索内容"/>&emsp;
                </div>

                <div class="layui-inline">
                    <button id="searchBtn" class="layui-btn search-btn"><i class="layui-icon">&#xe615;</i>搜索</button>&emsp;
                </div>

                <div class="layui-inline">
                    <button id="addBtn" class="layui-btn search-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                </div>


            </div>

            <table class="layui-table" id="table" lay-filter="table"></table>
        </div>

        <!-- 表单弹窗 -->
        <div id="addModel" style="display: none">
            <form id="editForm" class="layui-form model-form" method="post" action="/goods/save2"
                  enctype="multipart/form-data">
                <input name="id" type="hidden"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input name="name" placeholder="请输入标题" type="text" class="layui-input" maxlength="20"
                               lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详情</label>
                    <div class="layui-input-block">
                        <input name="detail" placeholder="请输入详情" type="text" class="layui-input" maxlength="20"
                               lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input name="price" placeholder="请输入价格" type="text" class="layui-input" maxlength="20"
                               lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存量</label>
                    <div class="layui-input-block">
                        <input name="stock" placeholder="请输入库存量" type="text" class="layui-input" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block">
                        <input type="file" name="file"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <select name="category.id">
                            <option value=""></option>
                            <option v-bind:value="item.id" v-for="item in categorylist">{{item.name}}</option>
                        </select>
                    </div>

                </div>
                <div class="layui-form-item model-form-footer">
                    <button class="layui-btn layui-btn-primary" type="button" id="btnCancel">取消</button>
                    <input class="layui-btn" type="submit" value="添加">
                </div>
            </form>
        </div>



        <!-- 表格操作列 -->
        <div id="barTpl" style="display: none">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>

    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#content',
        data: {
            categorylist: [],
            name: "xubo"
        }
    });


    $.ajax({
        type: "GET",
        url: "/category/find/all",
        async: false,
        success: function (data) {
            for (var i = 0; i < data.obj.length; i++) {
                app.categorylist.push({id: data.obj[i].id, name: data.obj[i].name});
                console.log(data.obj[i])
            }
            // app.categorylist=data.obj;
            console.log(app.categorylist);
            // for (var i = 0; i < data.obj; i++) {
            //     $("#category").append("<option value='"+ data.obj[i].id +"'>"+data.obj[i].name+"</option>")
            // }
        }
    });

</script>

<script src="../assets/layui.all.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>

<script>

    $(function () {
        //渲染表格
        layui.table.render({
            elem: '#table',
            url : '/merchant/find/m/goods',
            // url: '/goods/find/del',
            page: false,
            response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 1001 //成功的状态码，默认：0
                , msgName: 'msg' //状态信息的字段名称，默认：msg
                , countName: 'total' //数据总数的字段名称，默认：count
                , dataName: 'obj' //数据列表的字段名称，默认：data
            },
            cols: [[
                {type: 'numbers'},
                {field: 'id', sort: true, title: 'ID'},
                {
                    field: 'category', sort: true, templet: function (d) {
                        return d.category.name;
                    }, title: '分类'
                },
                {field: 'detail', sort: true, title: '商品详情'},
                {field: 'price', sort: true, title: '商品价格'},
                {field: 'salesVolume', sort: true, title: '销量'},
                {field: 'stock', sort: true, title: '库存'},
                {align: 'center', toolbar: '#barTpl', minWidth: 180, title: '操作'}
            ]]
        });

        //添加按钮点击事件
        $("#addBtn").click(function () {
            showEditModel(null);
        });

        //表单提交事件
        layui.form.on('submit(btnSubmit)', function(data) {
            data.field.token = getToken();
            data.field._method = $("#editForm").attr("method");
            layer.load(1);
            $.post("api/user", data.field, function(data){
                layer.closeAll('loading');
                if(data.code==200){
                    layer.msg(data.msg,{icon: 1});
                    layer.closeAll('page');
                    layui.table.reload('table', {});
                }else{
                    layer.msg(data.msg,{icon: 2});
                }
            }, "JSON");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //工具条点击事件
        layui.table.on('tool(table)', function (obj) {

            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { //修改
                showEditModel(data);
            } else if (layEvent === 'del') { //删除
                doDelete(obj);
            } else if (layEvent === 'reset') { //重置密码
                doReSet(obj.data.userId);
            }
        });

        //监听状态开关操作
        layui.form.on('switch(statusCB)', function (obj) {
            updateStatus(obj);
        });

        $("#btnCancel").click(function(){
            layer.closeAll('page');
        });

        //搜索按钮点击事件
        $("#searchBtn").click(function () {
            doSearch(table);
        });
    });

    //显示表单弹窗
    function showEditModel(data) {
        console.log("shuju")
        console.log(data)
        layer.open({
            type: 1,
            title: data == null ? "添加商品" : "修改商品",
            area: '450px',
            offset: '120px',
            content: $("#addModel").html()
        });

        $("#editForm")[0].reset();
        $("#editForm").attr("method","POST");
        $("#editForm").attr("action","/goods/save2");

        if(data!=null) {
            $("#editForm").attr("action","/goods/update2");
            $("#editForm input[name=id]").val(data.id);
            $("#editForm input[name=detail]").val(data.detail);
            $("#editForm input[name=name]").val(data.name);
            $("#editForm input[name=price]").val(data.price);
            $("#editForm input[name=stock]").val(data.stock);
        }
    }


    //删除
    function doDelete(obj) {
        layer.confirm('确定要删除吗？', function (index) {
            layer.close(index);
            layer.load(1);
            console.log(obj);
            $.ajax({
                url: "/goods/delete",
                type: "post",
                data: {
                    id: obj.data.id
                },
                dataType: "JSON",
                success: function (data) {
                    layer.closeAll('loading');
                    if (data.code == 1001) {
                        layer.msg(data.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }
            });
        });
    }


    //搜索
    function doSearch(table) {
        var key = $("#searchKey").val();
        var value = $("#searchValue").val();
        if (value == '') {
            key = '';
        }
        layui.table.reload('table', {where: {searchKey: key, searchValue: value}});
    }

    //删除
    function doReSet(userId) {
        layer.confirm('确定要重置密码吗？', function (index) {
            layer.close(index);
            layer.load(1);
            $.post("api/user/psw/" + userId, {
                token: getToken(),
                _method: "PUT"
            }, function (data) {
                layer.closeAll('loading');
                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 1});
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            }, "JSON");
        });
    }
    // $("#editForm").submit(function () {
    //     $(this).ajaxSubmit({
    //         success: function (data) {
    //             alert("新增成功");
    //         },
    //         error: function (err) {
    //         },
    //         clearForm: true
    //     });
    //     return false;   //阻止表单默认提交
    // });

</script>
</body>
</html>